let pics = [
    "./img/sma1.jpg",
    "./img/sma2.jpg",
    "./img/sma3.jpg",
    "./img/sma4.jpg",
    "./img/sma5.jpg",
    "./img/sma6.jpg",
    "./img/sma7.jpg",
    "./img/sma8.jpg",
    "./img/sma9.jpg",
    "./img/sma10.jpg",
];
const prodata ={
        text:"欣善怡澳洲进口谷物低脂麦片1400g早餐配无糖精水果燕麦片即食代餐麦脆",
        price:"89",
        pics:[
            "./img/sma1.jpg",
            "./img/sma2.jpg",
            "./img/sma3.jpg",
            "./img/sma4.jpg",
            "./img/sma5.jpg",
            "./img/sma6.jpg",
            "./img/sma7.jpg",
            "./img/sma8.jpg",
            "./img/sma9.jpg",
            "./img/sma10.jpg",
            "./img/sma1.jpg",
            "./img/sma2.jpg",
            "./img/sma3.jpg",
            "./img/sma4.jpg",
            "./img/sma5.jpg",
            "./img/sma6.jpg",
            "./img/sma7.jpg",
            "./img/sma8.jpg",
            "./img/sma9.jpg",
            "./img/sma10.jpg"
        ]
};

let $ = (sel) => document.querySelector(sel),
    prev = $('.icon-angle-left'),
    next = $('.icon-angle-right'),
    imglist = $('#imglist'),
    wrap = $('.wrap'),
    wrapUp = $('.wrap_up'),
    img = $('.wrap_up>img'),
    bigImg = $('.big_box>img'),
    mark = $('.mark'),
    len = pics.length;

// 渲染数据
function renderData(){
    imglist.innerHTML = pics.map((pic,idx) => {
        return '<li data-id="' + idx + '"><img src="'+ pic + '">';
    }).join('');
    let li = imglist.firstElementChild,
        liw = li.offsetWidth + 4;
    li.classList.add('active');
    // 设置ul的宽
    imglist.style.width = liw * len + 'px';
    // 给下一组按钮加ok这个类
    if(len > 5) next.classList.add('ok');
}
renderData();

// 滑过小图切换大图
imglist.addEventListener('mouseover',(e) => {
    // 鼠标滑过
    let target = e.target;
    if(target.nodeName === 'IMG'){
        let li = target.parentNode,
            active = $('.active'),
            id = li.getAttribute('data-id');
        active && active.classList.remove('active');
        li.classList.add('active');
        img.src = './img/pic' + id + '.jpg';
    }
});

// 点击下一张的时候
next.addEventListener('click',(e) => {
    scroller(next);
});

// 上一张
prev.addEventListener('click',() => {
    scroller(prev);
});
// 滚动
function scroller(btn){
    if(!btn.classList.contains('ok')) return;
    // 让ul滚动起来,计算滚动的距离
    let w = imglist.firstElementChild.offsetWidth + 4;
    let dis;
    if(btn.classList.contains('icon-angle-right')){
        prev.classList.add('ok');
        dis = - (len - 5) * w;
    }else{
        next.classList.add('ok');
        dis = 0;
    }
    imglist.style.left = dis + 'px';
    btn.classList.remove('ok');
}

// 移动放大镜
wrapUp.addEventListener('mousemove',(e) => {
    let l = e.clientX - wrap.offsetLeft - mark.offsetWidth/2,
        t = e.clientY - wrap.offsetTop - mark.offsetHeight/2,
        maxw = wrapUp.offsetWidth - mark.offsetWidth,
        maxh = wrapUp.offsetHeight - mark.offsetHeight;
    if(l < 0) l = 0;
    if(t < 0) t = 0;
    if(l > maxw) l = maxw;
    if(t > maxh) t = maxh;
    mark.style.left = l + 'px';
    mark.style.top = t + 'px';

    // 更换大图
    let src = wrapUp.firstElementChild.src,
        pos = src.lastIndexOf('/'),
        name = './img/b' + src.substr(pos+1);
    bigImg.src = name;
    let p = bigImg.offsetWidth / img.offsetWidth,
        bl = - p * l,
        bt = - p * t;
    bigImg.style.left = bl + 'px';
    bigImg.style.top = bt + 'px';
});

mark.addEventListener('click',(e) => {
    let mask = $('.mask');
    if(!mask){
        let mask = document.createElement('div');
        mask.classList.add('mask');
        document.body.appendChild(mask);
    }
    let layer = $('.layer');
    layer.style.display = 'block';
})

$('.icon-cuo').addEventListener('click',() => {
    let mask = $('.mask');
    document.body.removeChild(mask);
    $('.layer').style.display = 'none';
})


